<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>命名路由</title>
  </head>
  <body>
    <style>
      #app {
        text-align: center;
      }
      .container {
        background-color: #55ff7f;
        margin-top: 20px;
        height: 100px;
      }
    </style>
    <div id="app">
      <router-link :to="{name:'router1'}">首页 </router-link>
      <router-link :to="{name:'router2'}"> 主要产品</router-link>
      <router-link :to="{name:'router3'}"> 联系我们</router-link>
      <!-- 带参数的路由跳转示例 -->
      <router-link :to="{name:'router4', params: {id: 123, name: 'product1'}}"> 产品详情</router-link>
      <!-- 路由匹配到的组件将在这里渲染 -->
      <div class="container">
        <router-view></router-view>
      </div>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!--引入Vue Router-->
    <script src="https://unpkg.com/vue-router@next"></script>
    <script>
      // 定义路由组件
      const home = { template: '<div>home本公司是科技类的公司！</div>' }
      const list = { template: '<div>list本公司的产品主要有洗衣机和冰箱</div>' }
      const about = {
        template: '<div>about需要技术支持请联系作者微信codehome6</div>'
      }
      // 带参数的路由组件
      const detail = { 
        template: `
          <div>
            <h3>产品详情页面</h3>
            <p>产品ID: {{ $route.params.id }}</p>
            <p>产品名称: {{ $route.params.name }}</p>
          </div>
        `,
        // 在Vue 3中可以通过setup访问路由参数
        setup(props, { attrs }) {
          // 可以通过useRoute获取路由信息
          return {}
        }
      }
      
      // 定义路由配置数组，每个路由对象包含路径、组件和名称
      const routes = [
        // 首页路由：路径为/home，使用home组件，路由名称为router1
        { path: '/home', component: home, name: 'router1' },
        // 列表页路由：路径为/list，使用list组件，路由名称为router2
        { path: '/list', component: list, name: 'router2' },
        // 关于页路由：路径为/abount，使用about组件，路由名称为router3
        { path: '/abount', component: about, name: 'router3' },
        // 带参数的详情页路由：使用动态路径参数
        { path: '/detail/:id/:name', component: detail, name: 'router4' }
      ]
      
      // 创建路由器实例
      const router = VueRouter.createRouter({
        // 使用hash模式
        history: VueRouter.createWebHashHistory(),
        routes // 简写，相当于routes: routes
      })
      
      // 创建Vue应用实例
      const vm = Vue.createApp({})
      
      // 在Vue应用中安装并使用路由插件
      vm.use(router)
      // 将Vue应用挂载到id为'app'的DOM元素上
      vm.mount('#app')

    </script>
  </body>
</html>